import { Component } from 'react'
import { View } from '@tarojs/components'
import Page from '@/src/components/page';

import Api from '@/src/lib/api/api';
import Global from '@/src/lib/global';
import GoodsModel from '@/src/lib/models/goods_model';

import PageWarpper, { PageWarpperContext } from '@/src/components/page-warpper';
import ServiceBtn from '@/src/components/service-btn';
import Placeholder from '@/src/components/placeholder';
import GoodsItem from './components/goods-item';
import './index.scss';
import ScrollView from '@/src/components/scroll-view';


import { MovableArea, MovableView } from '@tarojs/components';
interface ProductsState {
    models: GoodsModel[]
}

interface ProductsProps {

}

class Products extends Component<ProductsProps, ProductsState> {
    static contextType = PageWarpperContext

    requestCount = 0
    constructor(props: {} | any) {
        super(props)
        this.state = {
            models: []
        }
    }

    onLoad() {

    }
    componentDidShow() {
        this.requestData()
    }

    requestData = () => {
        Api.goodsGoodsList({ lastid: 0 }).then((res) => {
            if (!res) {
                return
            }
            if (!res.issuccess) {
                Global.showToast(res.msg)
                return
            }

            this.setState({
                models: res.data
            })
            console.log(res.data)
        }).catch((error) => {
            console.log(error)
            this.setState({})
        })
        this.requestCount += 1
    }

    render() {

        let goodsItemEls = new Array()
        for (const model of this.state.models) {
            goodsItemEls.push(<GoodsItem model={model} />)
        }


        let el
        if (goodsItemEls.length <= 0 && this.requestCount > 0) {
            el = (
                <Placeholder desc="几甜酱已经努力为您加载了o(╥﹏╥)o" button="重新加载" onBtnClick={() => this.requestData()} />
            )
        } else {
            el = (
                <View className='products'>
                    {goodsItemEls}
                </View>
            )
        }

        return (
            <Page navigationBar={{ title: "全部商品" }} fixed>
                <MovableArea style=' width: 100%; height: 100%;'>
                    <ScrollView style={{ height: "100%" }} scrollY>
                        {el}
                    </ScrollView>
                    <MovableView x="350" y="500" direction="all" className="movab1">
                        <ServiceBtn />
                    </MovableView>
                    {/* <View className="kons"></View> */}
                </MovableArea>
            </Page>
        )
    }
}


export default PageWarpper()(Products)